<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function delerow(x) {
				var col = x.parentNode; //x的父节点是单元格
				var row = col.parentNode; //col的父节点是行
				var table = row.parentNode; //row的父节点是表格
				if(table) {
					table.removeChild(row); //删除表的子节点行
				}

				//				var row=x.parentNode.parentNode;
				//				var index=row.getAttribute("id");
				//				document.getElementById("tab").deleteRow(index);
			}

			function addrow() {
				var newrow = document.getElementById("tab").insertRow(1);
				var cols1 = newrow.insertCell(0);
				cols1.innerHTML = "样式1";
				var cols2 = newrow.insertCell(1);
				cols2.innerHTML = "";
				var cols3 = newrow.insertCell(2);
				cols3.innerHTML = "";
				var cols4 = newrow.insertCell(3);
				cols4.innerHTML = "<input onclick='updarow(this)' type='button' value='修改'/>";
				var cols5 = newrow.insertCell(4);
				cols5.innerHTML = "<input onclick='delerow(this)' type='button' value='删除'/>";
			}

			function updarow(y) {
				var colupda = y.parentNode;
				var row = colupda.parentNode;

				var colname = row.children[0];
				var colnum = row.children[1];
				var colprice = row.children[2];

				if(y.value == "修改") {
					y.value = "确定";

					//					var col1=row.cells[0];
					//					var col2=row.cells[1];
					//					var col3=row.cells[2];
					//					
					//					newcol1=document.createElement('input');
					//					newcol1.setAttribute('type','text');
					//					newcol1.style['width']='63px';
					//                  newcol1.style['height']='25px';
					//                  row.replaceChild(newcol1,col1);
					//                  row.removeChild(col1);

					//                  newcol2=document.createElement('input');
					//					newcol2.setAttribute('type','text');
					//					newcol2.style['width']='33.8px';
					//                  newcol2.style['height']='25px';
					//                  row.replaceChild(newcol2,col2);
					//                  row.removeChild(col2);

					//					
					//					col1.innerHTML='';
					//					col2.innerHTML='';
					//					col3.innerHTML='';

					//					var colprice = colupda.previousSibling;
					//					var colprice2=colprice.previousSibling;

					var newcolname = document.createElement("input");
					newcolname.setAttribute("type", "text");
					//                  newcolname.style['width']='63px';
					//                  newcolname.style['height']='25px';
					//                  row.replaceChild(newcolname,colname);

					colname.appendChild(newcolname);

					var newcolnum = document.createElement("input");
					//                  newcolnum.setAttribute("type", "text");
					//                  newcolnum.style['width']='33.8px';
					//                  newcolnum.style['height']='25px';
					//                  row.replaceChild(newcolnum,colnum);
					colnum.appendChild(newcolnum);

					var newcolprice = document.createElement("input");
					//					newcolprice.setAttribute("type", "text");
					//					newcolprice.style['width']='33.8px';
					//					newcolprice.style['height']='25px';
					//					row.replaceChild(newcolprice, colprice);
					colprice.appendChild(newcolprice);

				} else {
					y.value = "修改";
					colname.innerHTML = colname.children[0].value;
					colnum.innerHTML = colnum.children[0].value;
					colprice.innerHTML = colprice.children[0].value;

				}

			}
		</script>
	</head>

	<body>
		<div>
			<form>
				<table border="" cellspacing="" cellpadding="" id="tab">
					<tr>
						<th style="width: 150px;">商品名称</th>
						<th style="width: 150px;">数量</th>
						<th style="width: 150px;">价格</th>
						<th colspan="2">操作</th>
					</tr>
					<!--<tr>
						<td>Data1</td>
						<td>Data</td>
						<td>Data</td>
						<td><input onclick='updarow(this)' type="button" value="修改" /></td>
						<td><input onclick="delerow(this)" type="button" value="删除" /></td>
					</tr>
					<tr>
						<td>Data2</td>
						<td>Data</td>
						<td>Data</td>
						<td><input onclick='updarow(this)' type="button" value="修改" /></td>
						<td><input onclick="delerow(this)" type="button" value="删除" /></td>
					</tr>
					<tr>
						<td>Data3</td>
						<td>Data</td>
						<td>Data</td>
						<td><input onclick='updarow(this)' type="button" value="修改" /></td>
						<td><input onclick="delerow(this)" type="button" value="删除" /></td>
					</tr>
					<tr>
						<td>Data4</td>
						<td>Data</td>
						<td>Data</td>
						<td><input onclick='updarow(this)' type="button" value="修改" /></td>
						<td><input onclick="delerow(this)" type="button" value="删除" /></td>
					</tr>
					<tr>
						<td>Data5</td>
						<td>Data</td>
						<td>Data</td>
						<td><input onclick='updarow(this)' type="button" value="修改" /></td>
						<td><input onclick="delerow(this)" type="button" value="删除" /></td>
					</tr>
					<tr>
						<td>Data6</td>
						<td>Data</td>
						<td>Data</td>
						<td><input onclick='updarow(this)' type="button" value="修改" /></td>
						<td><input onclick="delerow(this)" type="button" value="删除" /></td>
					</tr>-->
				</table>
				<input onclick="addrow()" type="button" value="增加订单" />
			</form>
		</div>
	</body>

</html>